<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本操作</title>
</head>
<body>
    <!-- 
        innerText  添加文本内容，不解析标签
        innerHTML  添加文本内容，解析标签
        value    获取带有value属性的值的方式。对象名.value

        注意：这三个标签都是双向的，既可以赋值也可以取值！
            使用：标签名.innerText/HTML
     -->
     <div id="div"></div>
     <input type="text" id="username" value="刘备" />
</body>
<script>
    

    // 1. innerText
    let div = document.getElementById("div");  // 获取元素
    div.innerText = "我是div";
    div.innerText = "<br />";    // 原样输出页面信息,前面信息被覆盖了！

    // 2. innerHTML
    div.innerHTML = "<b>我是加粗的div</b>";

    // 获取div的值
    let vs = div.innerHTML;
    let vsT = div.innerText;
    alert(vs);
    alert(vsT);

    // 获取value值
    let username = document.getElementById("username").value;
    document.getElementById("username").value = "张飞";
    alert(username); // 刘备

</script>
</html>